<template>
  <div class="view-box-ZQSQ001" ref="viewBox">
    <div class="seckill-component" id="seckill-component">
      <div class="app-content-box">
        <div class="top-box"></div>

        <div>
          <div class="title-box">
            <div class="title-box-text">活动内容</div>
          </div>
          <div class="content-box">
            {{ seckilData.activityContent|appData('activityContent') }}
          </div>
        </div>

        <div class="content-box-yhq">
          <div class="yhq-img" v-if="goodsList.length==0">
<!--            <div class="left-box">-->
<!--              <div>-->
<!--                <div>-->
<!--                  <span>￥</span>-->
<!--                  <span class="cost">10</span>-->
<!--                </div>-->
<!--                <div class="condition">满100可用</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="center-box">-->
<!--              <div class="name">预览优惠券</div>-->
<!--              <div class="store">门店通用</div>-->
<!--            </div>-->
<!--            <div class="right-box">-->
<!--              <button>立即领取</button>-->
<!--            </div>-->
          </div>
          <div class="yhq-img" v-for="(item,index) in goodsList" :key="index" v-if="goodsList.length==1">
            <div class="left-box">
              <div v-if="item.couponCategory==1">
                <div>
                  <span>￥</span>
                  <span class="cost">{{ item.preferentialMoney }}</span>
                </div>
                <div class="condition">满{{ item.conditionMoney }}可用</div>
              </div>
              <div v-if="item.couponCategory==2">
                <div>
                  <span class="cost">{{ item.discount }}折</span>
                </div>
              </div>
              <div v-if="item.couponCategory==3">
                <div>
                  <span>￥</span>
                  <span class="cost">{{ item.preferentialMoney }}</span>
                </div>
                <div class="condition">下单立减</div>
              </div>

            </div>
            <div class="center-box">
              <div class="name">{{ item.couponName || '优惠券' }}</div>
              <div class="store">门店通用</div>
            </div>
            <div class="right-box">
              <button>立即领取</button>
            </div>
          </div>

          <el-row :gutter="10" v-if="goodsList.length>1">
            <el-col :span="12" v-for="(item,index) in goodsList" :key="index">
              <div class="yhq-img-col">
                <div class="left-box">
                  <div v-if="item.couponCategory==1">
                    <div>
                      <span>￥</span>
                      <span class="cost">{{ item.preferentialMoney }}</span>
                    </div>
                    <div class="condition">满{{ item.conditionMoney }}可用</div>
                  </div>
                  <div v-if="item.couponCategory==2">
                    <div>
                      <span class="cost">{{ item.discount }}折</span>
                    </div>
                  </div>
                  <div v-if="item.couponCategory==3">
                    <div>
                      <span>￥</span>
                      <span class="cost">{{ item.preferentialMoney }}</span>
                    </div>
                    <div class="condition">下单立减</div>
                  </div>
                </div>
                <div class="center-box">
                  <div class="name">{{ item.couponName || '优惠券' }}</div>
                  <div class="store">门店通用</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="content-box-btn" v-if="goodsList.length>1">
          <button class="oneClickClaim">一键领取</button>
        </div>


        <div class="content-box-store ">
          <div class="time">活动时间:{{ seckilData.startTime || '2022.06.30' }}-{{ seckilData.endTime || '2022.07.30' }}
          </div>
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="store-info store-title">活动门店:</div>
            </el-col>
            <el-col :span="14">
              <div class="store-info store-name" v-for="(store,index) in activityUnit" :key="index">
                <div>{{ store.applicableUnit }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


let defaultData = {
  activityName: "超值立减金限时大放送",
  activityContent: "中秋活动正式开启，福利特惠面向全体用户， xx优惠券/特惠车型限时领取/秒杀"
}
export default {
  name: 'SeckillMobile',
  props: {
    seckilData: {
      activityName: {
        type: String,
        default() {
          return '0'
        },
      },
      activityContent: {
        type: String,
        default() {
          return '0'
        },
      },
      activityUnit: {
        type: Array,
        default() {
          return [{
            applicableUnit: "西安市高新科技园店",
            unitAddress: "西安市雁塔区GOGO街区"
          }]
        }
      }
    },
    goodsList: {
      type: Array,
      default() {
        return []
      },
    },
    activityUnit: {
      type: Array,
      default() {
        return []
      },
    },
  },
  filters: {
    appData(val, key) {
      if (val && val != '') {
        return val
      } else {
        return defaultData[key]
      }
    }
  },
  watch: {
    activityUnit: {
      handler(val) {
        this.$forceUpdate()
      }
    },
  },
  data() {
    return {}
  },
  mounted() {
    // js
    console.log(this.activityUnit)
    this.zoom()
    // 窗口大小变化时，需要重算
    window.addEventListener('resize', this.zoom, false)
  },
  methods: {
    zoom() {
      let domBody = document.getElementsByClassName('view-box-ZQSQ001')[0]
      domBody.style.zoom = document.body.clientWidth / 22 + '%'
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.zoom, false)
  },
}
</script>

<style scoped>
.seckill-component {
  background: linear-gradient(0deg, #ff9045 0%, #ff8a00 100%);
  width: 374px;
  height: 735px;
  font-size: 12px;
  margin: 0 auto;

}

.view-box-ZQSQ001 {
  background: #ffffff;
  width: 432px;
  height: 865px;
  font-size: 12px;
  margin: 0 auto;
  background-image: url(../../../commImg/phone/left.png), url(../../../commImg/phone/top.png), url(../../../commImg/phone/right.png), url(../../../commImg/phone/lower.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left bottom, top, right bottom, bottom;
  padding: 65px 30px 59px 29px;
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}


.app-content-box {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.top-box {
  width: 100%;
  height: 243px;
  background-image: url(./img/topBg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.title-box {
  width: 357px;
  height: 76px;
  z-index: 2;
  background-image: url(./img/titleBg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: auto;
}


.title-box-text {
  margin-left: 55px;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  position: relative;
  top: 18px;
}

.content-box {
  width: 357px;
  border: 3px solid #1c1c1c;
  border-top: none;
  border-radius: 4px;
  position: relative;
  top: -30px;
  background: #f1f3f2;
  z-index: 1;
  margin: auto;
  padding: 30px 37px 20px 37px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #666666;
  line-height: 22.5px;
  letter-spacing: 0.28px;
  word-break: break-all;
}

.content-box-store {
  width: 357px;
  border: 3px solid #1c1c1c;
  border-radius: 4px;
  position: relative;
  top: 20px;
  background: #f1f3f2;
  z-index: 1;
  margin: auto;
}

.content-box-store .time {

  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #666666;
  line-height: 32px;
  letter-spacing: 0.28px;
}

.content-box-yhq {
  width: 357px;
  min-height: 115px;
  border-radius: 4px;
  background: #ff500b;
  margin: auto;
  position: relative;
  top: -20px;
  padding: 10px 10px 0px 10px;
}

.store-info {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  line-height: 25px;
  letter-spacing: 0.3px;
}

.store-title {
  text-align: right;
}


.yhq-img {
  background-image: url(./img/yhqbg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 95px;
  display: flex;
  margin-bottom: 10px;
}

.left-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  color: #ca151b;
}

.left-box .cost {
  font-size: 21px;
  font-weight: 900;
  text-align: center;
  font-style: oblique;
}

.left-box .condition {
  font-size: 10.5px;
  font-weight: bold;
  text-align: center;
}

.center-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.center-box .name {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

.center-box .store {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

.right-box {
  flex: 1;
  line-height: 95px;
  text-align: center;
}

.right-box button {
  border-radius: 14px;
  color: #ffffff;
  font-size: 12px;
  background: linear-gradient(#eb222a 0%, #ff5266 100%);
  border: none;
  height: 28px;
  width: 90px;
}

.yhq-img-col {
  background-image: url(./img/yhqbg1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 95px;
  display: flex;
  margin-bottom: 10px;
}

.content-box-btn {
  width: 357px;
  text-align: center;
  border-radius: 4px;
  z-index: 1;
  margin: 0px auto;
}

.oneClickClaim {
  width: 300px;
  height: 49px;
  background: linear-gradient(#ffeed4 0%, #ffe5c7 100%);
  border-radius: 24.5px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #ff500b;
  line-height: 32px;
  letter-spacing: 0.48px;
}
</style>
